<template>
  <div class="left-container">
    <h2>Left</h2>
    <p>{{ age }}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
export default {
  data () {
    return {
      age: 20
    }
  },
  // 生命周期钩子函数，写到和data平级的位置
  // beforeCreate () {
  //   console.log('beforeCreate', this.age)
  // },
  // created () {
  //   console.log('created', this.age)
  // },
  // beforeMount () {
  //   console.log('beforemount', document.querySelector('h2'))
  // },
  // mounted () {
  //   console.log('mount', document.querySelector('h2'))
  // },

  // beforeUpdate () {
  //   console.log('beforeUpdate', this.age)
  //   console.log(document.querySelector('p').innerHTML)
  // },
  // updated () {
  //   console.log('updated', this.age)
  //   console.log(document.querySelector('p').innerHTML)
  // },

  // beforeDestroy () {
  //   console.log('第7个beforeDestroy', '组件即将被销毁')
  //   console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  // },
  // destroyed () {
  //   console.log('第8个destroyed', '组件已经被销毁')
  //   console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  // },

  // 第11个钩子函数，捕获错误
  errorCaptured (err, vm, info) {
    // err 错误具体描述对象； err.message 描述错误信息的那句话
    // vm 表示发生错误的组件实例
    // info 是一个信息，表示错误发生在哪里
    // return false // 阻止错误继续传播
    console.log(err.message)
    console.log(vm)
    console.log(info)
    return false
  },
  components: {
    ArtList
  }
}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
  min-height: 150px;
}
</style>
